/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer, createStackNavigator, StackActions } from 'react-navigation';
import { Provider } from '@ant-design/react-native';
import HomeScreen from './src/components/home/Home';
import MeScreen from './src/components/me/Me';
import PoliceScreen from './src/components/police/Police';
import Home_qd from './src/components/home/sub/Home_qd';
import { Icon } from '@ant-design/react-native';

//首页顶部导航
const icon = <View style={{
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: "row",
  flex: 1,
}}><Text style={{ color: "#fff", fontSize:18}}>代办任务</Text>
  <Icon name={"caret-down"} size="xxs" color="#fff" />
</View>
const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    // 如果是静态的，就可以写死在这里，如果是动态的，不要在这里写，应该在每个组件中进行设置
    navigationOptions: {
      headerTitle: icon,
      headerTintColor: "#fff",
      headerStyle: {
        backgroundColor: "#3296FA",
      }
    }
  }
});
// const Home_Details = createStackNavigator({ screen:Home_Details1})
//底部tab
const TabBar = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarLabel: "代办任务",
      tabBarIcon: ({ focused, tintColor }) => {
        return (
          <Image
            source={
              focused
                ? require("./src/static/img/home1.png")
                : require("./src/static/img/home2.png")
            }
            style={{ tintColor: tintColor, width: 25, height: 25 }}
          />
        )
      }
    }
  },

  Police: {
    screen: PoliceScreen,
    navigationOptions: {
      tabBarLabel: "已办任务",
      tabBarIcon: ({ focused, tintColor }) => {
        return (
          <Image
            source={
              focused
                ? require("./src/static/img/police1.png")
                : require("./src/static/img/police2.png")
            }
            style={{ tintColor: tintColor, width: 25, height: 25 }}
          />
        )
      }
    }
  },
  Me: {
    screen: MeScreen,
    navigationOptions: {
      tabBarLabel: "我的",
      tabBarIcon: ({ focused, tintColor }) => {
        return (
          <Image
            source={
              focused
                ? require("./src/static/img/me1.png")
                : require("./src/static/img/me2.png")
            }
            style={{ tintColor: tintColor, width: 25, height: 25 }}
          />
        )
      }
    }
  },
})
TabBar.navigationOptions = {
  // Hide the header from AppNavigator stack
  header: null,
};


// const AppNavigator = createStackNavigator({ Home_Details: { screen: Home_Details } });


const AppNavigator = createStackNavigator({
  TabBar: {
    screen: TabBar,
  },
  Home_qd: {
    screen: Home_qd,
  },
  // Home_Details: {
  //   screen: Home_Details,
  // },
  // MyForm_Details: {
  //   screen: MyForm_Details,
  // },

});

const AppContainer = createAppContainer(
  AppNavigator
)



type Props = {};
export default class App extends Component<Props> {

  state = {
    theme: null,
    currentTheme: null,
  };
  changeTheme = (theme, currentTheme) => {
    this.setState({ theme, currentTheme });
  };

  render() {
    const { theme, currentTheme } = this.state;
    return (
      <Provider theme={theme}>
        <AppContainer
          screenProps={{ changeTheme: this.changeTheme, currentTheme }}
        />
      </Provider>
    );
  }
}


